<template>
  <div>
    <el-row type="flex" justify="space-between" :gutter="30">
      <el-col class="flex-left" :xs="17" :sm="17" :md="17" :lg="17" :xl="17">
        <div>
            <div class="filter-container mb">
                <div
                  class="filter-group"
                  v-for="(group, groupIndex) in groups"
                  :key="groupIndex"
                >
                  <div class="group-title">{{ group.title }}</div>
                  <div class="option-list">
                    <span
                      v-for="(option, optIndex) in group.options"
                      :key="optIndex"
                      @click="toggleCheck(option)"
                      :class="{ active: option.checked }"
                    >
                      {{ option.sysValueName }}
                    </span>
                  </div>
                </div>
              </div>

              <div style="background-color: #fff;">
                <el-table height="500" :data="tableData" style="width: 100%;" border>
                    <el-table-column prop="id" label="编号" width="180">
                    </el-table-column>
                    <el-table-column prop="name" show-overflow-tooltip label="名称" width="180">
                    </el-table-column>
                    <el-table-column prop="" label="数量">
                      <template slot-scope="scope">
                        <el-input-number
                          v-model="scope.row.num"
                          @change="handleChange(scope.row.num)"
                          :min="1"
                          :max="10"
                          
                        ></el-input-number>
                      </template>
                    </el-table-column>
                  </el-table>

                  <div style="padding: 10px;">
                    <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="1"
                    :page-sizes="[100, 200, 300, 400]"
                    :page-size="100"
                    layout="total, sizes, prev, pager, next"
                    :total="400"
                    background>
                  </el-pagination>
                  </div>
               
            </div>
        </div>
      </el-col>

      <el-col :xs="7" :sm="7" :md="7" :lg="7" :xl="7">
        <div>
          <div class="mb1">合计：</div>
          <el-table  class="mb" height="735" :data="tableData2" style="width: 100%" border>
            <el-table-column prop="id" label="编号" width="80">
            </el-table-column>
            <el-table-column prop="name" show-overflow-tooltip label="名称" width="100">
            </el-table-column>
            <el-table-column prop="type" label="媒体类型" width="100">
            </el-table-column>
            <el-table-column prop="" label="数量">
              <template slot-scope="scope">
                <el-input-number
                  v-model="scope.row.num"
                  @change="handleChange(scope.row.num)"
                  :min="1"
                  :max="10"
                  size="mini"
                ></el-input-number>
              </template>
            </el-table-column>
            <el-table-column prop="" label="操作" width="80">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="danger"
                  @click="handleDelete(scope.$index, scope.row)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>

           <div class="btn">
                  <el-button type="primary" @click="handconfirm">确认</el-button>
                </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import APISysLabel from "@/api/apiSysLabel";
export default {
  data() {
    return {
      groups: [
        {
          id: 1,
          title: "媒体管理",
          options: [
            { sysValueName: "线上管理", checked: false },
            { sysValueName: "线下管理", checked: false },
            { sysValueName: "其他", checked: false },
          ],
        },
        { id: 31, title: "媒体类型", options: [] },
        { id: 57, title: "城市", options: [] },
      ],

      tableData2: [
        {
          id: 111,
          name: "111的名字11111111111",
          type: "线上管理",
          num: 1,
        },
        {
          id: 222,
          name: "222的名字",
          type: "线上管理",
          num: 2,
        },
        {
          id: 333,
          name: "333的名字",
          type: "线下管理",
          num: 3,
        },
      ],
      tableData: [
        {
          id: 111,
          name: "111的名字",
          num: 1,
        },
        {
          id: 222,
          name: "222的名字",
          num: 2,
        },
        {
          id: 333,
          name: "333的名字",
          num: 3,
        },
      ],
    };
  },

  activated() {
    this.getcity();
  },
  methods: {
    toggleCheck(option) {
      option.checked = !option.checked;
    },

    getcity() {
      const params = {
        token: this.$store.state.token,
        sysLabelIds: "31,57", // 31类型，57城市
      };
      APISysLabel.getSysLabelValueManageList(params).then((res) => {
        if (res.key === 1000) {
          [31, 57].forEach((groupId) => {
            const targetGroup = this.groups.find((g) => g.id === groupId);
            if (targetGroup) {
              targetGroup.options = (res.result.data[groupId] || []).map(
                (option) => ({
                  ...option,
                  checked: false,
                })
              );
            }
          });
        }
      });
    },

    handleChange(num) {
      console.log(num);
    },

    handleDelete(index, row) {
      console.log(index, row);
    },

    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },

    handconfirm() {
      console.log("点击了确认");
    },
  },
};
</script>

<style scoped>
@import url("../../assets/styles/projectdetail.scss");
.filter-container {
  display: flex;
  flex-direction: column;
  gap: 30px;
  height: 100%;
  /* padding: 16px; */
}
.filter-group {
  display: flex;
  /* align-items: center; */
  gap: 12px;
  /* flex-wrap: wrap; */
}
.group-title {
  font-weight: 600;
  min-width: 80px;
  color: #333;
}
.option-list {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.option-list span {
  padding: 6px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 14px;
  color: #666;
}
.option-list span:hover {
  border-color: #409eff;
  color: #409eff;
}
.option-list span.active {
  background-color: #409eff;
  color: #fff;
  border-color: #409eff;
}

.flex-left {
  border-right: 1px solid #ddd;
  height: 90vh;
}

.btn {
  display: flex;
  align-items: center;
  justify-content: end;
}

::v-deep .el-input-number .el-input__inner {
  /* background-color: #f5f7fa; */
  border: 3px solid #f5f7fa !important;
}

::v-deep .el-pagination{
padding: 0 !important;
}

::v-deep .el-table::before{
    height: 0 !important;
}
</style>
